<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let vue = {
        a: 2,
        b: 4,
        c: {
          c1: 1
        }
      };

      observer(vue);
      vue.a = 3;
      vue.b = 3;
      vue.c.c1 = 2;
      vue.c.c1 = { cc1: 1 }; // 给新值赋值对象，如果新值没有监听，那么更改新值不会触发render函数。
      vue.c.c1.cc1 = 2;


      delete vue.c.c1.cc1; // 删除不会触发render函数
      vue.d = 2; // 新增key 也不会触发render函数

    function defineReactive(target, key, {c1:1}) {
        observer(value); // 深度监听
        Object.defineProperty(target, key, {
          get() {
            return value;
          },
          set(newVal) {
            if (newVal !== value) {
              value = newVal;
              observer(value); // 新值如果是对象，也要进行深度监听
              render();
            }
          }
        });
      }

      function observer(target) {
        if (typeof target !== "object" || target === null) {
          return target;
        }

        for (let key in target) {c1
          defineReactive(target, key, target[key]);
        }
      }

      function render() {
        console.log("假装是DOM");
      }
    </script>
  </body>
</html>
